<template>
	<view class="container">
		<view class="content-area">
			<!-- 用户列表区域 -->
			<view class="user-list">
				<scroll-view class="user-scroll" scroll-x="true" show-scrollbar="false">
					<view class="user-grid">
						<view v-for="(user, index) in userList" 
							  :key="index" 
							  class="user-item"
							  :data-user-type="user.openId === 'test_user' ? 'test' : 'normal'"
							  @click="showPaymentDialog(user)">
							<image class="user-avatar" 
								   :src="user.openId === 'test_user' ? '/static/images/user_logo.png' : user.avatarUrl" 
								   mode="aspectFill" 
								   lazy-load></image>
							<text class="user-nickname"><text v-if="index==0" class="tip">房主</text>{{user.nickname}}</text>
							<text class="user-score" :class="{'score-positive': user.score > 0, 'score-negative': user.score <= 0}">
								¥{{user.score}}
							</text>
						</view>
						<view class="user-item add-user" @click="openQRCodePopup">
							<view class="add-avatar">
								<text class="add-icon">+</text>
							</view>
							<text class="add-text">邀请</text>
						</view>
					</view>
				</scroll-view>
			</view>
			
			<!-- 广告位 -->
			 <view class="ad-section">
				 <image class="ad-image" src="/static/images/advertisement.png" mode="aspectFit"></image>
			</view>
			<!-- <view class="adContainer">
			  <ad  ad-type="video" ad-intervals="30"></ad>
			</view> -->
			<!-- 支付记录区域固定在底部，位于 tabBar 之上 -->
			<view class="records-area">
				<view class="records-title">支付记录</view>
				<scroll-view 
					class="records-scroll" 
					scroll-y="true" 
					show-scrollbar="false"
					enhanced="true"
					bounces="true"
					@scrolltolower="loadMoreRecords"
					:scroll-anchoring="true">
					<view v-for="(record, index) in gameRecords" 
							:key="index" 
							class="record-item">
						<text class="record-user">{{record.fromUser || record.payerName}}</text>
						<text>向</text>
						<text class="record-user">{{record.toUser || record.payeeName}}</text>
						<text>支付了</text>
						<text class="record-amount">{{record.amount}}</text>
						<text>分</text>
					</view>
					<view v-if="gameRecords.length === 0" class="empty-records">
						暂无支付记录
					</view>
					<view v-if="loading" class="loading-more">
						加载中...
					</view>
					<view v-if="!hasMore && gameRecords.length > 0" class="no-more">
						没有更多记录了
					</view>
				</scroll-view>
			</view>
		</view>
		
		<!-- 结算按钮 -->
		<view class="settle-button" @click="handleSettle">
			<button class="settle-btn" type="warn">结算</button>
		</view>
		

		<!-- 支付弹窗 -->
		<uni-popup ref="popup" type="center">
			<view class="popup-content">
				<view class="popup-title">向 {{selectedUser.nickname}} 支付</view>
					<view class="popup-input">
						<input type="number" 
							   v-model="paymentAmount" 
							   placeholder="请输入金额"
							   class="amount-input"/>
					</view>
				<view class="popup-buttons">
					<button class="btn cancel" @click="hidePaymentDialog">取消</button>
					<button class="btn confirm" @click="confirmPayment" type="primary">确认</button>
				</view>
			</view>
		</uni-popup>

		<!-- 邀请二维码弹窗 -->
		<uni-popup ref="qrcodePopup" type="center">
			<view class="qrcode-content">
				<view class="qrcode-title">微信扫描二维码加入</view>
				<view class="qrcode-subtitle">房号：{{roomInfo.roomId}}</view>
				<view class="qrcode-image-wrapper">
					<image v-if="qrCodeUrl" :src="qrCodeUrl" mode="aspectFit" class="qrcode-image"></image>
					<view v-else class="qrcode-loading">生成中...</view>
				</view>
				<view class="qrcode-tip">也可以通过"转发"让好友加入</view>
				<button class="share-btn"  type="primary" open-type="share">转发给好友</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import eventBus from '@/utils/eventBus.js';
	export default {
		data() {
			return {
				userList: [],
				gameRecords: [],
				selectedUser: {},
				paymentAmount: '',
				roomInfo: null,
				qrCodeUrl: '',
				qrCodeVisible: false,
				qrCodeCache: {},
				loading: false,
				hasMore: true,
				page: 1,
				pageSize: 10
			}
		},
		onShow() {
			const userInfo = uni.getStorageSync('userInfo');
			this.userInfo = userInfo;
			const isScanned = uni.getStorageSync('isScannedCode')
			if(isScanned){
				this.loadScannedRoom(isScanned);
			}else{
				this.checkRoom();
			}
		},
		methods: {
	        //检查房间信息
			async checkRoom() {
				console.log('检查房间状态');
				try {
					if (!this.userInfo || !this.userInfo.openId) {
						console.log('未找到用户信息，跳转到授权页');
						uni.reLaunch({
							url: '/pages/auth/auth'
						});
						return;
					}
					// 获取房间信息
					const roomId = uni.getStorageSync('current_room_id')||uni.getStorageSync('scanned_room_id');
					console.log('当前房间ID:', roomId);
					
					if (!roomId) {
						console.log('未找到房间ID，跳转到个人中心');
						uni.switchTab({	
							url: '/pages/profile/profile'
						});
						uni.showToast({
							title: '请先创建房间',
							icon: 'none'
						});
						return;
					}
					// 加载房间数据
					console.log('开始加载房间数据');
					await this.loadRoomData(roomId);
				} catch (e) {
					console.error('初始化失败:', e);
					uni.showToast({
						title: '初始化失败，请重试',
						icon: 'none'
					});
				}
			},
			//扫码进入
			async loadScannedRoom(roomId) {
				try {
					console.log('开始加载房间:', roomId);
					const userInfo = uni.getStorageSync('userInfo');
					if (!userInfo || !userInfo.openId) {
						uni.reLaunch({
							url: '/pages/auth/auth'
						});
						return;
					}
					// 检查用户当前房间
					await this.continueLoadRoom(roomId, userInfo);
				} catch (e) {
					console.error('加载房间失败:', e);
					uni.showToast({
						title: '加载房间失败',
						icon: 'none'
					});
				}
			},
			// 继续加入房间的流程
			async continueLoadRoom(roomId, userInfo) {
				try {
					console.log('加入房间:', roomId);
					// 调用云函数加入房间
					const result = await uniCloud.callFunction({
						name: 'room',
						data: {
							action: 'join',
							data: {
								roomId,
								userInfo: {
									openId: userInfo.openId,
									nickName: userInfo.nickName,
									avatarUrl: userInfo.avatarUrl
								}
							}
						}
					});
					console.log('加入房间结果:', result);
					if (result.result.code === 0) {
						// 加载房间数据
						await this.loadRoomData(roomId);
						// 清除本地房间ID
						uni.removeStorageSync('current_room_id');
						uni.setStorageSync('scanned_room_id', roomId);
						uni.removeStorageSync('isScannedCode');
						uni.showToast({
							title: '成功加入房间',
							icon: 'success'
						});
					} else {
						throw new Error(result.result.msg);
					}
				} catch (e) {
					console.error('加入房间失败:', e);
					uni.showToast({
						title: e.message || '加入房间失败',
						icon: 'none'
					});
					// 清除本地房间ID
					uni.removeStorageSync('current_room_id');
					// 清除扫描的房间ID
					uni.removeStorageSync('scanned_room_id');
					// 跳转回个人中心
					uni.switchTab({
						url: '/pages/profile/profile'
					});
				}
			},
			async loadRoomData(roomId) {
				console.log('加载房间数据:', roomId);
				try {
					// 获取房间信息
					const result = await uniCloud.callFunction({
						name: 'room',
						data: {
							action: 'getRoom',
							data: { roomId }
						}
					});
					console.log('获取房间结果:', result);

					if (result.result.code === 0) {
						this.roomInfo = result.result.data;
						this.userList = this.roomInfo.members;
						// 设置游戏记录
						this.gameRecords = result.result.data.records || [];
						uni.setNavigationBarTitle({
							title: '房间号 ' + this.roomInfo.roomId
						});
					} else {
						// 清除本地房间ID
						uni.removeStorageSync('current_room_id');
						// 清除扫描的房间ID
						uni.removeStorageSync('scanned_room_id');
						uni.switchTab({
							url:'/pages/profile/profile'
						})
						throw new Error(result.result.msg);
					}
				} catch (e) {
					// 清除本地房间ID
					uni.removeStorageSync('current_room_id');
					// 清除扫描的房间ID
					uni.removeStorageSync('scanned_room_id');
					console.error('加载房间数据失败:', e);
					uni.showToast({
						title: e.message || '加载失败',
						icon: 'none'
					});
				}
			},
			showPaymentDialog(user) {
				// 检查是否是当前用户
				if (user.openId === this.userInfo.openId) {
					uni.showToast({
						title: '不能向自己支付积分',
						icon: 'none'
					});
					return;
				}
				
				this.selectedUser = user;
				this.$refs.popup.open();
			},
			hidePaymentDialog() {
				this.paymentAmount = '';
				this.$refs.popup.close();
			},
			async confirmPayment() {
				if (!this.paymentAmount) {
					uni.showToast({
						title: '请输入金额',
						icon: 'none'
					});
					return;
				}

				const amount = parseInt(this.paymentAmount);
				if (isNaN(amount) || amount <= 0) {
					uni.showToast({
						title: '金额必须大于0',
						icon: 'none'
					});
					return;
				}

				console.log('准备支付，参数:', {
					roomId: this.roomInfo.roomId,
					payerOpenid: this.userInfo.openId,
					payeeOpenid: this.selectedUser.openId,
					amount
				});
				try {
					const result = await uniCloud.callFunction({
						name: 'room',
						data: {
							action: 'addRecord',
							data: {
								roomId: this.roomInfo.roomId,
								payerOpenid: this.userInfo.openId,
								payeeOpenid: this.selectedUser.openId,
								amount
							}
						}
					});

					console.log('支付结果:', result);

					if (result.result.code === 0) {
						// 更新本地数据
						this.userList = result.result.data.members;
						this.gameRecords.unshift(result.result.data.record);
					
						this.hidePaymentDialog();
					
						uni.showToast({
							title: '支付成功',
							icon: 'success'
						});
					} else {
						throw new Error(result.result.msg || '支付失败');
					}
				} catch (e) {
					console.error('支付失败:', e);
					uni.showToast({
						title: e.message || '支付失败',
						icon: 'none'
					});
				}
			},
			openQRCodePopup() {
				// 如果已有二维码，直接显示
				if (this.qrCodeUrl) {
					this.qrCodeVisible = true;
					this.$refs.qrcodePopup.open();
					return;
				}
				// 否则生成新的二维码
				this.generateQRCode().then(() => {
					this.$refs.qrcodePopup.open();
				}).catch(err => {
					console.error('显示二维码失败:', err);
					uni.showToast({
						title: '显示二维码失败',
						icon: 'none'
					});
				});
			},
			hideQRCode() {
				// uni.share({
				//     provider: 'weixin',
				//     scene: "WXSceneSession",
				//     type: 5,
				//     imageUrl: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/share-logo@3.png',
				//     title: '欢迎体验uniapp',
				//     miniProgram: {
				//         id: 'gh_abcdefg',
				//         path: 'pages/profile/profile',
				//         type: 0,
				//         webUrl: 'http://uniapp.dcloud.io'
				//     },
				//     success: ret => {
				//         console.log(JSON.stringify(ret));
				//     }
				// });
				this.qrCodeUrl = '';
				this.qrCodeVisible = false;
				this.$refs.qrcodePopup.close();
			},
			async generateQRCode() {
				try {
					// 检查缓存
					const cacheKey = `qrcode_${this.roomInfo.roomId}`;
					const cachedQRCode = uni.getStorageSync(cacheKey);
					if (cachedQRCode) {
						this.qrCodeUrl = cachedQRCode;
						this.qrCodeVisible = true;
						return;
					}
					const result = await uniCloud.callFunction({
						name: 'room',
						data: {
							action: 'generateQRCode',
							data: {
								roomId: this.roomInfo.roomId
							}
						}
					});

					if (result.result.code === 0) {
						const { base64, contentType } = result.result.data;
						// 生成data URL
						const dataUrl = `data:${contentType};base64,${base64}`;
						// 缓存二维码
						uni.setStorageSync(cacheKey, dataUrl);
						this.qrCodeUrl = dataUrl;
						this.qrCodeVisible = true;
					} else {
						throw new Error(result.result.msg);
					}
				} catch (e) {
					console.error('生成二维码失败:', e);
					uni.showToast({
						title: e.message || '生成二维码失败',
						icon: 'none'
					});
				}
			},
			async handleSettle() {
				if (!this.roomInfo || !this.roomInfo.roomId) {
					console.error('房间信息不存在');
					uni.showToast({
						title: '房间信息错误',
						icon: 'none'
					});
					return;
				}
				console.log('当前房间信息:', this.roomInfo);
				const roomId = this.roomInfo.roomId; // 保存房间ID供后续使用
				uni.showModal({
					title: '确认结算',
					content: '结算后房间将被解散，是否继续？',
					confirmColor: '#ff4d4f',
					success: async (res) => {
						if (res.confirm) {
							try {
								console.log('开始结算房间:', roomId);
								
								uni.showLoading({
									title: '结算中...'
								});
								const params = {
									action: 'settleRoom',
									data: {
										roomId: roomId
									}
								};
								console.log('调用云函数参数:', params);
								
								// 调用云函数结算房间
								const result = await uniCloud.callFunction({
									name: 'room',
									data: params
								});
								
								console.log('结算结果:', result);
								
								if (result.result.code === 0) {
									// 清除本地房间ID
									uni.removeStorageSync('current_room_id');
									uni.removeStorageSync('scanned_room_id');
									// 清除当前组件的房间信息
									this.roomInfo = null;
									this.userList = [];
									this.gameRecords = [];
									uni.hideLoading();
									uni.showToast({
										title: '结算成功',
										icon: 'success'
									});
									// 跳转到结算页面
									setTimeout(() => {
										uni.navigateTo({
											url: `/pages/settle/settle?roomId=${roomId}`
										});
									}, 1500);
								} else {
									throw new Error(result.result.msg || '结算失败');
								}
							} catch (e) {
								console.error('结算失败:', e);
								uni.hideLoading();
								uni.showToast({
									title: e.message || '结算失败',
									icon: 'none'
								});
							}
						}
					}
				});
				this.refreshUserInfo();
				this.clearQRCodeCache();
			},
			// 加载更多游戏记录
			async loadMoreRecords() {
				if (this.loading || !this.hasMore) return;
				
				try {
					this.loading = true;
					console.log('加载更多记录, 页码:', this.page);
					
					const result = await uniCloud.callFunction({
						name: 'room',
						data: {
							action: 'getRecords',
							data: {
								roomId: this.roomInfo.roomId,
								page: this.page,
								pageSize: this.pageSize
							}
						}
					});
					
					if (result.result.code === 0) {
						const records = result.result.data;
						this.gameRecords = [...this.gameRecords, ...records];
						this.hasMore = records.length === this.pageSize;
						this.page++;
					} else {
						throw new Error(result.result.msg);
					}
				} catch (e) {
					console.error('加载更多记录失败:', e);
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					});
				} finally {
					this.loading = false;
				}
			},
			//刷新用户信息
			async refreshUserInfo() {
			  try {
			    if (!this.userInfo?.openId) {
			      console.warn('未找到openId，跳过刷新用户信息');
			      return;
			    }
			    console.log('开始刷新用户信息:', this.userInfo.openId);
			    const result = await uniCloud.callFunction({
			      name: 'user',
			      data: {
			        action: 'getInfo',
			        data: {
			          openId: this.userInfo.openId
			        }
			      }
			    });
			    console.log('获取用户最新信息结果:', result);
			    if (result.result.code === 0) {
			      // 更新本地用户信息
			      const newUserInfo = {
			        ...this.userInfo,
			        ...result.result.data
			    };
			      uni.setStorageSync('userInfo', newUserInfo);
			    } else {
			      console.error('获取用户信息失败:', result.result.msg);
			    }
			  } catch (e) {
			    console.error('刷新用户信息失败:', e);
			  }
			},
			// 清除二维码缓存
			clearQRCodeCache() {
				const cacheKey = `qrcode_${this.roomInfo.roomId}`;
				uni.removeStorageSync(cacheKey);
				this.qrCodeUrl = '';
				this.qrCodeVisible = false;
			},
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
	}

	.content-area {
		flex: none;
		/* padding: 4rpx 12rpx 0; /* 减小顶部内边距 */
	}

	.user-list {
		margin: 12rpx 12rpx 4rpx; /* 统一的底部间距 */
		padding: 15rpx;
		/* min-height: calc((100vh - 400rpx) / 5); /* 调整为 1/5 以容纳完整的用户信息 */ 
		background-color: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.room-header {
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12rpx;
	}

	.room-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		display: inline-block;
	}

	.room-id {
		font-size: 24rpx;
		color: #666;
		display: block;
		background-color: #f5f5f5;
		padding: 4rpx 16rpx;
		border-radius: 20rpx;
		letter-spacing: 2rpx;
		font-family: monospace;
		border: 1rpx solid #eee;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
	}

	.user-scroll {
		width: 100%;
		white-space: nowrap;
	}

	.user-grid {
		display: inline-flex;
		padding: 10rpx 0;
	}

	.user-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 150rpx;
		margin-right: 10rpx;
		transition: transform 0.2s ease;
	}
	.user-item:active {
		transform: scale(0.95);
	}

	.user-avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-bottom: 8rpx;
		border: 4rpx solid #fff;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		flex-shrink: 0;
		object-fit: cover;
		background-color: #f5f5f5;
	}

	.user-item[data-user-type="test"] .user-avatar {
		object-fit: contain;
		background-color: #ffffff;
	}

	.user-nickname {
		font-size: 24rpx;
		color: #333;
		margin-bottom: 8rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 100%;
		text-align: center;
	}
	
	.user-nickname .tip{
		font-size: 22rpx;
		color: red;
	}
	.user-score {
		font-size: 24rpx;
		font-weight: 500;
	}

	.score-positive {
		color: #ff4d4f; /* 红色 */
	}

	.score-negative {
		color: #52c41a; /* 浅绿色 */
	}

	.add-user {
		margin-right: 0px;
		margin-left: 0px;
		transition: transform 0.2s ease;
	}

	.add-user:active {
		transform: scale(0.95);
	}

	.add-avatar {
		width: 100rpx; /* 保持与用户头像一致 */
		height: 100rpx;
		border-radius: 50%;
		margin-bottom: 8rpx;
		border: 4rpx solid #fff;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		background-color: #f5f5f5;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.add-icon {
		font-size: 48rpx;
		color: #999;
	}

	.add-text {
		font-size: 24rpx;
		color: #333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 100%;
		text-align: center;
	}

	.ad-section {
		margin: 12rpx; /* 统一的底部间距 */
		height: 312rpx; 
		background-color: #ffffff;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
		border-top: 1rpx solid rgba(0, 0, 0, 0.05);
	}

	.ad-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.settle-button {
		position: fixed;
		left: 12rpx;
		right: 12rpx;
		bottom: 11rpx;
		z-index: 99;
	}

	.settle-btn {
		width: 100%;
		height: 75rpx;
		line-height: 75rpx;
		background-color: #ff4d4f;
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
		border-radius: 40rpx;
		box-shadow: 0 4rpx 12rpx rgba(255, 77, 79, 0.3);
	}

	.settle-btn::after {
		border: none;
	}

	.records-area {
		margin: 13rpx 12rpx 12rpx; /* 统一的底部间距 */
		height: calc(100vh - 684rpx);
		background-color: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
		display: flex;
		flex-direction: column;
		overflow: hidden;
		z-index: 98;
	}

	.records-title {
		flex: none;
		padding: 20rpx 30rpx;
		font-size: 28rpx;
		color: #666;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.records-scroll {
		flex: 1;
		height: calc(100% - 70rpx); /* 减去标题高度
		padding: 0 30rpx; /* 添加左右内边距 */
	}

	.record-item {
		padding: 16rpx 10rpx;
		border-bottom: 1rpx solid #f0f0f0;
		font-size: 28rpx;
		color: #666;
		display: flex;
		align-items: center;
		justify-content: flex-start; /* 改为左对齐 */
		gap: 8rpx;
	}

	.record-item:last-child {
		border-bottom: none; /* 最后一项不要底部边框 */
	}

	.record-user {
		color: #409EFF; /* 淡蓝色 */
		font-weight: 500;
	}

	.record-amount {
		color: #ff4d4f; /* 红色 */
		font-weight: 500;
	}

	.empty-records {
		padding: 40rpx 0;
		text-align: center;
		color: #999;
		font-size: 26rpx;
	}

	.loading-more,
	.no-more {
		padding: 20rpx 0;
		text-align: center;
		color: #999;
		font-size: 24rpx;
	}

	.popup-content {
		background-color: #fff;
		border-radius: 20rpx;
		width: 560rpx;
		padding: 40rpx;
		box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.1);
	}

	.popup-title {
		font-size: 32rpx;
		text-align: center;
		margin-bottom: 30rpx;
		font-weight: bold;
		color: #333;
	}

	.popup-input {
		margin-bottom: 30rpx;
	}

	.amount-input {
		width: 100%;
		height: 80rpx;
		border: 2rpx solid #eee;
		border-radius: 12rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		transition: border-color 0.3s ease;
	}

	.amount-input:focus {
		border-color: #07c160;
	}

	.popup-buttons {
		display: flex;
		gap: 20rpx;
	}

	.btn {
		flex: 1;
		margin: 0;
		font-size: 28rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 12rpx;
		transition: opacity 0.3s ease;
	}

	.btn:active {
		opacity: 0.8;
	}

	.cancel {
		background-color: #f5f5f5;
		color: #666;
	}

	.confirm {
		background-color: #07c160;
		color: #fff;
	}

	/* 移除底部菜单相关样式 */
	.bottom-menu,
	.menu-item {
		display: none;
	}

	.qrcode-content {
		background-color: #fff;
		border-radius: 20rpx;
		width: 600rpx;
		padding: 40rpx;
		text-align: center;
		box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.1);
	}

	.qrcode-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 12rpx;
	}

	.qrcode-subtitle {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 30rpx;
	}

	.qrcode-image-wrapper {
		width: 400rpx;
		height: 400rpx;
		margin: 0 auto 30rpx;
		background: #f5f5f5;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx;
		overflow: hidden;
		border: 1rpx solid #eee;
	}

	.qrcode-image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.qrcode-loading {
		color: #999;
		font-size: 28rpx;
	}

	.qrcode-tip {
		font-size: 26rpx;
		color: #999;
		margin-bottom: 20rpx;
	}

	.share-btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		border-radius: 40rpx;
		background-color: #07c160;
		color: #fff;
		border: none;
		transition: opacity 0.3s ease;
	}

	.share-btn:active {
		opacity: 0.8;
	}
</style>
